<template>
	<view>
		<my-search  @click="gotoSearch"></my-search>
	<view class="scroll-view-container">
		<!-- 左侧的滚动视图区域 -->
		<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
		  <block v-for="(item, i) in cateList" :key="i">
		    <view :class="['left-scroll-view-item', i === active ? 'active' : '']"  @click="activeChanged(i)">{{item.cat_name}}</view>
		  </block>
		</scroll-view>
		<!-- 右侧的滚动视图区域 -->
		<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
			<!-- goodlist -->
				<view v-if="goodsList != []" class="goods-list">
				  <view v-for="(goods, i) in goodsList" :key="i" @click="gotoDetail(goods)">
					  <my-goods :goods="goods"></my-goods>
				  </view>
				</view>
				<view v-else class="tip">
					等待上架~
				</view>
		</scroll-view>
	  </view>
	</view>
</template>

<script>
	import cloudApi from "@/common/cloundApi.js"
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				wh:0,
				cateList: [],
				active: 0,
				// 滚动条距离顶部的距离
				scrollTop:0,
				goodsList:[]
			};
		},
		onLoad(){
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight
		    // 调用获取分类列表数据的方法
		    this.getCateList()	
		},
		methods: {
		  getCateList() {
			  // 发起请求
			  cloudApi.call({
			  	name:"cate",
			  	data:{
			  		action:"get"
			  	},
			  	success:(res)=>{
			  		// 为数据赋值
			  		this.cateList = res.result
			  		// this.total = res.message.total
			  	},
			  })
			  cloudApi.call({
			  	name:"goods",
			  	data:{
			  		action:"cate",
					cat_id:this.active+1
			  	},
			  	success:(res)=>{
			  		// 为数据赋值
			  		this.goodsList = res.result
			  	},
			  })
		  },
		  // 选中项改变的事件处理函数
		  activeChanged(i){
			  this.active = i
			  cloudApi.call({
			  	name:"goods",
			  	data:{
			  		action:"cate",
			  		cat_id:this.active+1
			  	},
			  	success:(res)=>{
			  		// 为数据赋值
			  		this.goodsList = res.result
			  	},
			  })
			  this.scrollTop = this.scrollTop ? 0 : 1
		  },
		  // 点击跳转到商品详情页面
		  gotoDetail(goods) {
			uni.navigateTo({
			  url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
			})
		  },
		  // 跳转到分包中的搜索页面
		 gotoSearch() {
		   uni.navigateTo({
			 url: '/subpkg/search/search'
		   })
		 }
			
		}
		
	}
</script>

<style lang="scss">
.scroll-view-container{
	display: flex;
	.left-scroll-view{
		 width: 120px;
		 .left-scroll-view-item{
			 background-color: #F7F7F7;
			 line-height: 60px;
			 text-align: center;
			 font-size: 12px;
			 
			 &.active{
				 background-color: #fff;
				 position: relative;
				 &::before{
					 content: ' ';
					 display: block;
					 width: 3px;
					 height: 30px;
					 background-color: #c00000;
					 position: absolute;
					 top: 50%;
					 left: 0;
					 transform: translateY(-50%);
				 }
			 }
		 }
	}
	.right-scroll-view{
		.tip{
			text-align: center;
			padding: 15px;
			color: rgba(0, 0, 0, .8);
		}
	}
}
.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
.cate-lv3-list {
  display: flex;
  flex-wrap: wrap;

  .cate-lv3-item {
    width: 33.33%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 60px;
      height: 60px;
    }

    text {
      font-size: 12px;
    }
  }
}
</style>
